<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>患者信息</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/common/bootstrap/css/bootstrap.css"
          media="all">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/common/bootstrap/js/jquery-1.12.4.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/common/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/pageJs/grouping/patientsWithDetails.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/pageJs/grouping/noction.js"></script>
</head>
<style>
    span {
        margin: 0 5px;
    }

    .navigation li {
        list-style: none;
        margin-left: -50px;
        color: #090ff7;
        position: relative;
        line-height: 30px;
        cursor: pointer;
    }

    .navigation li ul li {
        margin-left: -10px;
        color: #00c0ef;
        line-height: 20px;
    }

    .navigation a {
        text-decoration: none;
        color: #333;
    }

    .navigation a:hover {
        text-decoration: none;
        color: #333;
    }

    .navigation a:active {
        text-decoration: none;
        color: #333;
    }

    .navigation a:visited {
        text-decoration: none;
        color: #333;
    }
</style>
<body>
<c:forEach items="${pisList}" var="pis">
    <div style="width: 95%; height: 550px; margin: 0 auto; margin-top: 10px;">
        <div id="left" style="float: left; width:16%; height: 550px; border-right: 1px solid #277CCB;">
            <div id="left_top" style="padding:20px 5px 20px 5px;border-bottom: 1px solid #277CCB;">
                <span>姓名：</span><span>${pis.patientName}</span>
                <span style="margin-left: 20px; color: red;">
            </span><br>
                <span>性别：</span><span>${pis.gender==1?"男":"女"}</span><br>
                <c:forEach items="${pis.diagnosis}" var="diagnosis">
                    <span>住院号：</span><span>${diagnosis.hospitalNumber}</span><br>
                </c:forEach>
                <fmt:formatDate value="${pis.dateOfBirth}" var="birth" pattern="yyyy-MM-dd"></fmt:formatDate>
                <span>出生日期：</span><span>${birth}</span><br><br>
                <span>
                <a href="${pageContext.request.contextPath}/group/list">
                    展开其他随访组
                </a>
            </span>
            </div>
            <div id="left_footer" style="overflow: visible; padding: 20px 5px 20px 20px;">
                <ul class="navigation">
                    <li><a href="#">【基线】</a>
                        <ul>
                            <!-- 二级联动-->
                            <li><a href="#">基本信息</a>
                                <ul>
                                    <fmt:formatDate value="${pis.time}" var="pisTime"
                                                    pattern="yyyy-MM-dd"></fmt:formatDate>
                                    <li><a href="#" style=" color: green;">${pisTime}</a></li>
                                </ul>
                            </li>
                            <!-- 二级联动-->
                            <li><a href="#">实验室检查</a>
                                <ul>
                                    <c:forEach items="${fn:split(pis.admissionStatus,',')}" var="anemias">
                                        <li><a href="#" style=" color: green;">${anemias}</a></li>
                                    </c:forEach>
                                </ul>
                            </li>
                            <!-- 二级联动-->
                            <li><a href="#">体格检查</a>
                                <ul>
                                    <c:forEach items="${fn:split(pis.number,',')}" var="signsOfBloods">
                                        <li><a href="#" style=" color: green;">${signsOfBloods}</a></li>
                                    </c:forEach>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <c:forEach items="${fn:split(pis.observeTheNumber,',')}" var="foGroups" varStatus="status">
                        <li><a href="#">【第${status.count}次随访】</a>
                            <ul>
                                <li><a href="#" style=" color: green;">${foGroups}</a></li>
                            </ul>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div id="right" style="float:right;width: 83%;height: 550px;">
            <div class="right_top" style="border-bottom: 1px solid #321;">
                <table border="1" class="table">
                    <caption style="color: blue;"><h4>随访进度及计划</h4></caption>
                    <thead>
                    <tr>
                        <th>基本信息</th>
                        <th>体格检查</th>
                        <th>实验室检查</th>
                        <th>随访信息表</th>
                        <th>查看完整随访计划</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr align="center" style="color: green;">
                        <td><i class="glyphicon glyphicon-ok-circle"></i></td>
                        <td>
                            <c:forEach items="${fn:split(pis.number,',')}" var="signsOfBloods">
                                <i class="glyphicon glyphicon-ok-circle"></i>
                            </c:forEach>
                        </td>
                        <td>
                            <c:forEach items="${fn:split(pis.admissionStatus,',')}" var="anemias">
                                <i class="glyphicon glyphicon-ok-circle"></i>
                            </c:forEach>
                        </td>
                        <td>
                            <c:forEach items="${fn:split(pis.observeTheNumber,',')}" var="foGroups" varStatus="status">
                                <i class="glyphicon glyphicon-ok-circle"></i>
                            </c:forEach>
                        </td>
                        <td>
                            <a href="${pageContext.request.contextPath}/group/groupingAndDepartment"><i
                                    class="glyphicon glyphicon-search"></i></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="right_footer" style=" height: 400px; overflow: visible; ">
                <div class="col-sm-10" style="margin: 30px 0 10px 0;">
                    <div class="col-sm-12" style=" font-size: 16px; color: blue;">
                        <label class="col-sm-4 control-label">基本信息</label>
                        <input type="hidden" id="patientId" value="${pis.patientId}">
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label">姓名：</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="patientName">
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label">性别：</label>
                            <div class="col-sm-6">
                                <select class="form-control" id="patientGender">
                                    <option value="">请选择</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label">出生日期：</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="patientBieth" type="date"/>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label">民族：</label>
                            <div class="col-sm-6">
                                <select class="form-control" id="sel_national"> </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style=" font-size: 16px; color: blue;">
                        <label class="col-sm-4 control-label">体格检查</label>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group col-sm-6">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">身高：</button>
                                <input class="btn btn-default" id="patHeight" style="width: 100px;">
                                <button type="button" class="btn btn-default">cm</button>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">体重：</button>
                                <input class="btn btn-default" id="patWeight" style="width: 100px;">
                                <button type="button" class="btn btn-default">kg</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style=" font-size: 16px; color: blue;">
                        <label class="col-sm-4 control-label">实验室检查</label>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group col-sm-6">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">血细胞：</button>
                                <input class="btn btn-default" id="patLearning" style="width: 100px;">
                                <button type="button" class="btn btn-default">mmol/L</button>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">血红蛋白：</button>
                                <input class="btn btn-default" id="patHemoglobin" style="width: 100px;">
                                <button type="button" class="btn btn-default">mmol/L</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <button class="btn btn-primary" id="btn_query" style="margin: 10px 10px 10px 110px;">保存</button>
                </div>
            </div>
        </div>
    </div>
</c:forEach>
<script>
    $(function () {
        $('.navigation ul').hide();
        $('.navigation li a:first-child').click(function () {
            $(this).css({"color": "black"});
            $(this).siblings().toggle();
        })
    })
</script>
</body>
</html>